<template>
  <div class="app-container upgrade-container">
    <!-- <el-card class="mb-4">
      <template #header>
        <span>当前程序信息</span>
      </template>
      <el-descriptions :column="2" border>
        <el-descriptions-item label="程序名称">{{ currentProgramInfo.name }}</el-descriptions-item>
        <el-descriptions-item label="版本">{{ currentProgramInfo.version }}</el-descriptions-item>
        <el-descriptions-item label="上传时间">
          {{ currentProgramInfo.uploadTime }}
        </el-descriptions-item>
        <el-descriptions-item label="CRC">{{ currentProgramInfo.crc }}</el-descriptions-item>
      </el-descriptions>
    </el-card> -->

    <el-card class="mb-4">
      <template #header>
        <span>上传升级资源包</span>
      </template>

      <!--   -->
      <FileUpload
        v-model="newFileList"
        :limit="1"
        accept=".tar.gz"
        uploadBtnText="选择程序文件"
        style="width: 300px"
        @change="handleFileUploaded2"
      />
      <el-descriptions v-if="newProgramInfo" :column="2" border class="mt-2">
        <el-descriptions-item label="程序名称">{{ newProgramInfo.name }}</el-descriptions-item>
        <el-descriptions-item label="版本">{{ newProgramInfo.version }}</el-descriptions-item>
        <el-descriptions-item label="上传时间">
          {{ newProgramInfo.uploadTime }}
        </el-descriptions-item>
        <el-descriptions-item label="CRC">{{ newProgramInfo.crc }}</el-descriptions-item>
      </el-descriptions>
    </el-card>

    <!-- <el-card class="mb-4">
      <template #header>
        <span>程序信息对比</span>
      </template>
      <el-table :data="compareData" border style="width: 100%">
        <el-table-column prop="field" label="字段" width="120" />
        <el-table-column prop="current" label="当前程序" />
        <el-table-column prop="new" label="新程序" />
      </el-table>
    </el-card> -->

    <!-- 进度条 -->
    <el-card v-if="progressDisplay.showProgress" class="progress-card" shadow="never">
      <div class="progress-container">
        <el-progress
          :percentage="progressDisplay.percentage"
          :text-inside="true"
          :stroke-width="24"
          :status="progressDisplay.status"
        >
          <span>{{ progressDisplay.description }}</span>
        </el-progress>
        <p class="progress-description">{{ progressDisplay.description }}</p>
      </div>
    </el-card>

    <!-- <div class="upgrade-actions">
      <el-button type="primary" size="default" :disabled="!newInfo" @click="handleUpgrade">
        升级
      </el-button>
      <el-button type="danger" size="default" :disabled="!canRollback" @click="handleRollback">
        回滚
      </el-button>
    </div> -->
    <div class="upgrade-actions">
      <el-button
        type="primary"
        size="default"
        :disabled="!canStartUpgrade || isOperationInProgress"
        @click="onStartUpgrade"
      >
        <!-- 根据操作状态显示加载图标 -->
        <el-icon
          v-if="isOperationInProgress && upgradeCurrentStatus === 'upgrading'"
          class="is-loading"
        >
          <Loading />
        </el-icon>
        升级
      </el-button>
      <el-button
        type="danger"
        size="default"
        :disabled="!canStartRollback || isOperationInProgress"
        @click="onStartRollback"
      >
        <!-- 根据操作状态显示加载图标 -->
        <el-icon
          v-if="isOperationInProgress && upgradeCurrentStatus === 'rolling_back'"
          class="is-loading"
        >
          <Loading />
        </el-icon>
        回滚
      </el-button>
    </div>
    <div>
      <el-card class="mb-4 mt-4">
        <template #header>
          <span>上传备份配置</span>
        </template>
        <FileUpload
          v-model="backupFileList"
          :limit="1"
          accept=".json"
          uploadBtnText="选择配置文件"
          style="width: 300px"
          @change="handleBackupFileUploaded"
        />
        <el-descriptions v-if="backupInfo" :column="2" border class="mt-2"></el-descriptions>
      </el-card>
      <div class="upgrade-actions">
        <el-button type="primary" size="default" :disabled="!backupInfo" @click="handleBackup">
          备份
        </el-button>
      </div>
    </div>

    <!-- 备份点列表 -->
    <el-card class="mb-4 mt-4">
      <template #header>
        <span>备份点</span>
      </template>
      <el-table
        :data="backupTableData"
        border
        style="width: 100%"
        @selection-change="handleSelectionChange"
        :select-on-indeterminate="false"
        ref="backupTableRef"
      >
        <el-table-column type="selection" width="55" />
        <el-table-column prop="index" label="序号" width="80" />
        <el-table-column prop="backupName" label="备份点名称" />
      </el-table>
      <div class="upgrade-actions">
        <el-button
          type="primary"
          size="default"
          :disabled="!selectedBackup"
          @click="handleRollback"
        >
          回滚
        </el-button>
      </div>
    </el-card>
  </div>
</template>

<script setup lang="ts">
import { ref, computed, onMounted } from "vue";
import FileUpload from "@/components/Upload/FileUpload.vue";
import { FileInfo } from "@/api/file.api";
import { ElMessage } from "element-plus";
import { useUpgradeProcess } from "@/composables/useUpgradeProcess";
import { Loading } from "@element-plus/icons-vue";

// 使用Composable，解构出需要的数据和方法
const {
  newFileList,
  backupFileList,
  backupInfo,
  handleBackupFileUploaded,
  handleBackup,
  currentProgramInfo,
  newProgramInfo,
  backupList,
  selectedBackup,
  backupTableRef,
  progressDisplay,
  upgradeCurrentStatus,
  isOperationInProgress,
  canStartUpgrade,
  canStartRollback,
  handleFileUploaded,
  handleFileUploaded2,
  onStartUpgrade,
  onStartRollback,
  clearNewProgram,
  fetchBackupList,
  handleSelectionChange,
  handleRollback,
} = useUpgradeProcess();

// 备份点表格数据
const backupTableData = computed(() => {
  return (
    backupList?.value?.map((backupName, index) => ({
      index: index + 1,
      backupName: backupName,
    })) || []
  );
});

// 进入页面时获取备份点列表
const fetchBackupData = async (): Promise<void> => {
  try {
    await fetchBackupList();
  } catch (error: any) {
    console.error("fetchBackupData error:", error);
    ElMessage.error("获取备份点列表失败！");
  }
};

// 组件挂载时获取备份点列表
onMounted(() => {
  fetchBackupData();
});

// 程序信息对比数据
const compareData = computed(() => [
  {
    field: "程序名称",
    current: currentProgramInfo?.value?.name,
    new: newProgramInfo?.value?.name || "-",
  },
  {
    field: "版本",
    current: currentProgramInfo?.value?.version,
    new: newProgramInfo?.value?.version || "-",
  },
  {
    field: "上传时间",
    current: currentProgramInfo?.value?.uploadTime,
    new: newProgramInfo?.value?.uploadTime || "-",
  },
  {
    field: "CRC",
    current: currentProgramInfo?.value?.crc,
    new: newProgramInfo?.value?.crc || "-",
  },
]);
</script>

<style lang="scss" scoped>
.upgrade-container {
  .mb-4 {
    margin-bottom: 16px;
  }
  .mt-2 {
    margin-top: 12px;
  }
  .upgrade-actions {
    display: flex;
    gap: 16px;
    justify-content: flex-end;
    margin-top: 24px;
  }
}
</style>
